<template>
  <view class="ayi-banner" :class="[`ayi-banner--${type}`, `ayi-banner--dot-${dotType}`]" :style="{ height:'354rpx' }" @click="onTap">
    <swiper :autoplay="autoplay" :current="current" :interval="interval" :duration="duration" :vertical="vertical" previous-margin="0rpx" :next-margin="nextMargin" acceleration="false" easing-function="linear" @change="onChange">
      <swiper-item v-for="(item, index) in list" :key="index">
        <view class="ayi-banner-item" :style="{borderRadius:'20rpx'}" :class="{ 'is-active': current === index }">
          <slot :item="item" :index="index">
            <image class="ayi-banner-item__image" :style="{'border-radius': setRpx(radius) }" :mode="imageMode" :src="item.url" />
          </slot>
        </view>
      </swiper-item>
    </swiper>
    <view class="ayi-banner__btn" v-if="arrow">
      <button class="ayi-banner__btn-prev" @click="onPrev" v-if="isPrev">
        <i class="ayi-icon-arrow-left"></i>
      </button>
      <button class="ayi-banner__btn-next" @click="onNext" v-if="isNext">
        <i class="ayi-icon-arrow-right"></i>
      </button>
    </view>
  </view>
</template>

<script lang="ts" setup>
/**
 * @description 该组件基于官方的 swiper, 参数与官方一致, 同时添加新的支持
 * @property {Number} value 绑定值
 * @property {String} type 类型 '' | chain | card
 * @property {Boolean} arrow 是否显示切换箭头
 * @property {String} imageMode 图片裁剪, 缩放模式
 * @property {String} height 高度，默认300rpx
 * @property {String} radius 圆角，默认10rpx
 * @property {Array} margin 外间距
 * @property {String} dotType 指示器类型 round | circle | square
 * @event {Function} change 绑定值改变时触发
 */

import { computed, PropType, ref, watch } from "vue"
import { setRpx } from "./tools"
const props = defineProps({
	// 绑定值
	modelValue: Number,
	type: String as PropType<"chain" | "card" | "">,
	arrow: Boolean,
	list: {
		type: Array as PropType<{ url: string }[]>,
		default: () => []
	},
	bannerBgColor:{
		type:String,
		default:"#79CC9E",
	},
	imageMode: {
		type: String,
		default: "aspectFill"
	},
	height: {
		type: [String, Number],
		default: 300
	},
	radius: {
		type: [String, Number],
		default: 10
	},
	margin: {
		type: Array,
		default: () => []
	},
	nextMargin:{
		type:String,
		default:'40rpx'
	},
	indicatorDots: Boolean,
	indicatorColor: {
		type: String,
		default: "rgba(0, 0, 0, .3)"
	},
	indicatorActiveColor: {
		type: String,
		default: "#000000"
	},
	dotType: {
		type: String as PropType<"round" | "circle" | "square">,
		default: "round"
	},
	activeClass: String,
	changingClass: String,
	autoplay: Boolean,
	interval: {
		type: Number,
		default: 500
	},
	duration: {
		type: Number,
		default: 200
	},
	circular: Boolean,
	vertical: Boolean,
	acceleration: Boolean,
	disableProgrammaticAnimation: Boolean,
	displayMultipleItems: {
		type: Number,
		default: 1
	},
	skipHiddenItemLayout: Boolean,
	disableTouch: Boolean,
	touchable: {
		type: Boolean,
		default: true
	},
	easingFunction: {
		type: String,
		default: "default"
	}
})
const emit = defineEmits(["currcahange", "change", "click"])
const current = ref<number>(0)

watch(
	() => props.modelValue,
	(val: any) => {
		current.value = val || 0
	},
	{
		immediate: true
	}
)

// 是否采用衔接滑动
const circular = computed(() => {
	switch (props.type) {
		case "card":
			return true
		default:
			return props.circular
	}
})

// 指示点颜色
const indicatorColor = computed(() => (props.dotType ? "" : props.indicatorColor))

// 当前选中的指示点颜色
const indicatorActiveColor = computed(() => (props.dotType ? "" : props.indicatorActiveColor))

// 是否有上一个
const isPrev = computed(() => circular.value || current.value > 0)

// 是否有下一个
const isNext = computed(() => circular.value || current.value < props.list.length - 1)

// 监听值变化
function onChange(e: any) {
	current.value = e.detail.current
	emit("currcahange",e.detail.current)
}
// 点击，返回序号
function onTap() {
	emit("click", current.value)
}
defineExpose({current})
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>
